<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>Milano | Interactive Responsive HTML5 Template</title>
	<link rel="shortcut icon" href="favicon.ico">

	<!-- Add your CSS files here -->
	<link rel="stylesheet" href="css/normalize.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/nivo/default.css">
	<link rel="stylesheet" href="css/themes/green.css">

	<!-- Add your Fonts here -->
	<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

</head>
<body>

<a href="http://themeforest.net/item/milano-interactive-responsive-html5-template/5110008" title="Get this Theme" class="badge">Get this Theme</a>

<div class="settings">
	<a href="#" class="icon-cog"></a>
	<span class="themes">
		<a href="#" class="theme" data-color="red">Theme Red</a>
		<a href="#" class="theme" data-color="green">Theme Green</a>
		<a href="#" class="theme" data-color="blue">Theme Blue</a>
		<a href="#" class="theme" data-color="white">Theme White</a>
		<a href="#" class="theme" data-color="rose">Rose Color</a>
		<a href="#" class="theme" data-color="aqua">Aqua Color</a>
		<a href="#" class="theme" data-color="orange">Orange Color</a>
	</span>
</div>

<div class="container">

	<div class="logo"><img src="img/logo.svg" alt="Logo"></div>

	<div class="social">
		<a href="http://facebook.com/rocketthemes" class="icon-facebook" title="Facebook"></a>
		<a href="http://twitter.com/rocketthemes" class="icon-twitter" title="Twitter"></a>
		<a href="#" class="icon-googleplus" title="Googleplus"></a>
		<a href="#" class="icon-dribbble" title="Dribbble"></a>
		<a href="#" class="icon-behance" title="Behance"></a>
		<a href="#" class="icon-instagram" title="Instagram"></a>
		<a href="#" class="icon-flickr" title="Flickr"></a>
	</div>
	<!-- Social Icons End -->

	<header>
		<nav id="nav">
			<ul class="nav">
				<li><img src="img/logo.svg" alt="My Logo"></li>
				<li><a href="index.html" class="icon-user"><span>Profile</span></a></li>
				<li class="active"><a href="work.html" class="icon-briefcase"><span>Work</span></a></li>
				<li><a href="resume.html" class="icon-list"><span>Resume</span></a></li>
				<li><a href="contact.html" class="icon-mail"><span>Contact</span></a></li>
			</ul>
		</nav>
	</header>
	<!-- Header End -->

	<section class="content">
		<article class="s-project">
			<h2>Summer Photoshoot</h2>
			<div class="project-nav">
				<a href="project-3.html" class="icon-arrow-left-5" title="Previous Project"></a>
				<a href="work.html" class="icon-layout" title="All Projects"></a>
				<a href="project-2.html" class="icon-arrow-right-5" title="Next Project"></a>
			</div>

			<div class="details">

				<div>
					<h4>Project Description</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, in accusantium vero id ducimus molestiae. Aut, possimus, cumque, laboriosam repellendus quo esse molestiae asperiores quos voluptas autem voluptate repellat maiores incidunt blanditiis ipsam neque quia dolor provident qui nihil officiis ipsa eaque modi dolorum perferendis deleniti ea. Sequi, ipsa, saepe harum dignissimos labore tempora distinctio aut modi officia veritatis vero?</p>
				</div>

				<ul>
					<li>
						<h4>Client</h4>
						<p>Google Inc.</p>
					</li>
					<li>
						<h4>Year</h4>
						<p>2012</p>
					</li>
					<li>
						<h4>Order</h4>
						<p>Web Design, Web Development</p>
					</li>
				</ul>
			</div>

			<div class="slider-wrapper theme-default clearfix">
	            <div class="slider NivoSLider">
	                <img src="img/work/photography/1.jpg" data-thumb="img/work/photography/1.jpg" alt="" title="This is an image description." />
	            	<img src="img/work/photography/2.jpg" data-thumb="img/work/photography/2.jpg" alt="" />
	                <img src="img/work/photography/3.jpg" data-thumb="img/work/photography/3.jpg" alt="" />
	                <img src="img/work/photography/4.jpg" data-thumb="img/work/photography/4.jpg" alt="" />
	                <img src="img/work/photography/5.jpg" data-thumb="img/work/photography/5.jpg" alt="" />
	                <img src="img/work/photography/6.jpg" data-thumb="img/work/photography/6.jpg" alt="" />
	                <img src="img/work/photography/7.jpg" data-thumb="img/work/photography/7.jpg" alt="" />
	                <img src="img/work/photography/8.jpg" data-thumb="img/work/photography/8.jpg" alt="" />
	                <img src="img/work/photography/9.jpg" data-thumb="img/work/photography/9.jpg" alt="" />
	            </div>
	        </div>
			<!-- Slider End -->
		
		</article>

	</section>
	<!-- Content End -->

</div>
<!-- Container End -->

<!-- Add your scripts here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery.mixitup.js"></script>
<script src="js/jquery.swipebox.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>

<script>
	var navigation = responsiveNav("#nav", {
		animate: true,        // Boolean: Use CSS3 transitions, true or false
		transition: 400,      // Integer: Speed of the transition, in milliseconds
		label: "",            // String: Label for the navigation toggle
		insert: "before",     // String: Insert the toggle before or after the navigation
		customToggle: "",     // Selector: Specify the ID of a custom toggle
		openPos: "relative",  // String: Position of the opened nav, relative or static
		jsClass: "js",        // String: 'JS enabled' class which is added to <html> el
		init: function(){},   // Function: Init callback
		open: function(){},   // Function: Open callback
		close: function(){}   // Function: Close callback
	});

	// Mixitup Filter Gallery
    $(function(){
        $('.work-grid').mixitup();
    });

	// Swipebox Gallery
	$(function($) {
		$(".swipebox").swipebox();
	});

	// Nivo Slider
    $(window).load(function() {
        $('.slider').nivoSlider({
	        effect: 'boxRandom',
	        slices: 15,
	        boxCols: 8,
	        boxRows: 4,
	        animSpeed: 500,
	        pauseTime: 3000,
	        controlNav: true
        });
    });
</script>

</body>
</html>